<script setup>
  import { ref, onMounted, computed } from 'vue';
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  import { doPost } from '@/http/api'
  import { ElMessageBox } from 'element-plus'
  import { genFileId } from 'element-plus'
  
  // 面包屑数据
  const breadcrumbList = ref([
    {
      name: '首页',
      routeName: 'homeData'
    },
    {
      name: 'json转postman-formdata参数',
      routeName: 'json2FormData'
    },
  ]);

  const breadcrumbDataStore = useBreadcrumbData();
  breadcrumbDataStore.setBreadcrumbData(breadcrumbList);

  const jsonStr = ref('');
  const formdata = ref('');
  const handleSubmit = () => {
    if (!jsonStr.value) {
      ElMessageBox.alert('请输入json', '提示', {
        confirmButtonText: '确定'
      });
      return;
    }

    doPost("/json2FormData", {
      jsonStr: jsonStr.value,
    }).then((res) => {
      formdata.value = res.formData;
    })
    
  };

</script>

<template>
  <main class="main">
    <el-input style="height: 325px;" rows="15" type="textarea" placeholder="请输入json" v-model="jsonStr"></el-input>
    <div class="transform-btn margin-top-bottom-10">
      <el-button type="primary" @click="handleSubmit">转换</el-button>
    </div>
    <el-input style="height: 325px;" rows="15" type="textarea" placeholder="" v-model="formdata"></el-input>
  </main>
</template>

<style scoped>
.transform-btn{
  text-align: center;
}
</style>